<template lang='pug'>
  .page
    .login-bg
      .login-center-box
        .login-box-header 欢迎登陆
        .login-box-body
          Form.ivu-row(ref="formData" :model="formData" :rules="rules" :label-width="0")
            FormItem.form-item.ivu-col(v-for="(item, index) of formItem" :label="item.label" :key="index" :class="item.style" :prop="item.prop")
              Input(v-model="formData[item.model]" :name="item.model" :placeholder="item.placeholder" :prefix="item.icon")
          Button.login-btn(@click="handleSubmit('formData')" type="primary" long) 登 录
</template>

<script>
import { AccountApi } from '@/api/Account.api.js'
import dataApi from '@/api/data.js'
import { Common } from '@/utils/common.js'
export default {
  data () {
    return {
      formData: {
        UserName: 'admin',
        Password: '123'
      },
      formItem: [
        { type: 'input', label: '用户名', placeholder: '请输入用户名', prop: 'UserName', model: 'UserName', style: 'ivu-col-span-24', icon: 'md-person' },
        { type: 'input', label: '密码', placeholder: '请输入密码', prop: 'Password', model: 'Password', style: 'ivu-col-span-24', icon: 'md-lock' }
      ],
      rules: {
        UserName: [
          { required: true, message: '请输入用户名' }
        ],
        Password: [
          { required: true, message: '请输入密码' }
        ]
      }
    }
  },

  mounted () {
  },

  methods: {
    handleSubmit (name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          AccountApi.login(this[name]).then(res => {
            console.log('res: ', res)
            if (res.data.UserId) {
              localStorage.setItem('clientLoginInfo', JSON.stringify(res.data))
              Common.setCookie('loginInfo', JSON.stringify(res.data), 7)
              Common.setCookie('token', 'super_admin')
              this.$router.push({
                path: '/home',
                name: 'home'
              })
            } else {
              this.$Message.error({
                content: '出现错误',
                duration: 10,
                closable: true
              })
            }
          })
        }
      })
    }
  }
}
</script>

<style lang="less" scope>
  .login-bg{
    width: 100%;
    height: 100%;
    background-image: url('../../assets/images/login-bg.jpg');
    background-size: cover;
    background-position: center;
    position: relative;
  }
  .login-center-box{
    width: 360px;
    background: rgba(0,0,0,.5);
    position: absolute;
    left: 50%;
    margin-left: -180px;
    top: 50%;
    transform: translateY(-60%);
    border-radius: 6px;
    overflow: hidden;
    // transform: skewX(-5deg);
    .login-box-header{
      line-height: 48px;
      color: #fff;
      padding: 0 25px;
      font-size: 18px;
      letter-spacing: 2px;
      font-weight: bold;
      border-bottom: solid 1px rgba(0,0,0,.8);
    }
    .login-box-body{
      color: #fff;
      padding: 25px;
      border-top: solid 1px rgba(255,255,255,.3);
      .form-item{
        .ivu-form-item-label{
          display: none;
        }
        .ivu-form-item-content{
          .ivu-input-wrapper{
            .ivu-icon{
              line-height: 40px;
              font-size: 20px;
            }
            .ivu-input{
              height: 40px;
              line-height: 40px;
              font-size: 14px;
              background: rgba(0,0,0,.3);
              border: 0;
              color: #fff;
            }
          }
        }
      }
    }
  }
  .login-btn{
    height: 40px;
    background-image: linear-gradient(90deg, #6d83ff 0%, #46b0ff 100%);
    border-radius: 10px 5px 10px 5px;
    border: transparent;
    font-size: 16px;
    font-weight: normal;
  }
</style>
